<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <style type="text/css">
        .job_line {
            margin-top: 10px;
        }
        .job_line > li {
            width: 18%;
            float: left;
            height: 150px;
            margin: 10px;
            border: #cccccc 1px solid;
        }
    </style>
</head>
<body>

<div id="job_box">
    <ul class="job_line">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="job_line">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="job_line">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
   function f() {
       var array = document.getElementsByTagName('li');
       $(array).each(function (index,arg0) {
           var div = $("<div></div>").addClass("job_item");
           var title = $("<h4></h4>").text("bean.jTitle").css({"float": "left", "font-weight": "normal"});
           var time = $("<h6></h6>").text("7月5日 19:50");
           var wages = $("<h4></h4>").text("20-30k").css({
               "float": "left",
               "margin-left": "20px",
               "font-weight": "normal",
               "color": "red"
           });
           var clearFix = $("<div></div>").addClass("clear_float");
           var desc = $("<h5></h5>").text("本科").css({
               "color": "#777777",
               "font-weight": "normal",
               "margin-top": "10px"
           });
           var comp = $("<h6></h6>").text("北京思教科技").css({"font-weight": "normal", "margin-top": "10px"});
           $(arg0).append(div);
           $(".job_item").append(title,time, wages, clearFix, desc, comp);
       })
   }
   $(document).ready(function () {
       f();
   })
</script>

</body>
</html>